<template>
  <div v-if="isGenerateCharts" class="modal-overlay">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-header-left">
          <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="88px">
            <el-form-item label="选择时间：">
              <div class="m-h-l-day">
                <el-date-picker
                  v-model="formattedDate"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="选择时间"
                  :size="size"
                  @change="handleQuery"
                  :disabled-date="disabledDate"
                />
                <span></span>
                <el-date-picker
                  v-model="formattedYesterday"
                  type="date"
                  value-format="YYYY-MM-DD"
                  @change="handleQuery1"
                  placeholder="选择时间"
                  :size="size"
                  :disabled-date="disabledDate"
                />
              </div>
            </el-form-item>
            <el-button
              type="primary"
              style="background-color: #083b98; border-color: #083b98; margin-left: 20px"
              @click="handleQuery"
              >生成图表</el-button
            >
          </el-form>
        </div>
        <img @click="closeModal" src="../../../assets/images/home-page/close-bt.png" alt="" />
      </div>
      <div class="m-c-box">
        <div class="m-c-content">
          <div class="m-c-c-left">
            <div class="m-c-c-l-content">
              <img src="../../../assets/images/home-page/jc-1.png" alt="" />
              <span>在线监测</span>
            </div>
            <div class="tab-headers">
              <div
                class="button"
                v-for="(tab, index) in tabs"
                :key="index"
                :class="{ active: givActiveIndex === index }"
                @click="givSwitchTab(tab.attrGroupName, index)"
              >
                {{ tab.attrGroupName }}
              </div>
            </div>
          </div>
          <div class="m-c-c-right">
            <div class="m-c-c-r-content">
              <MonitoringChart ref="boxChart" :myTime="formattedDate" />
              <!-- <gaugeChart :dom="gaugeChartOptions.dom" :option="gaugeChartOptions.option">
                <div :dom="gaugeChartOptions.dom"></div>
              </gaugeChart> -->
            </div>
            <div class="m-c-c-r-content">
              <MonitoringChart ref="isChart" :myTime="formattedYesterday" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { busDeviceAlarmInfo, exportData, getDevicePointAttrGroup } from '@/api/auth/ledger.js';
  import axios from 'axios';
  import { tagsStore } from '@/stores';
  import MonitoringChart from '@/views/home/components/MonitoringChart.vue';
  const authNav = tagsStore();
  const props = defineProps(['isGenerateCharts']);
  const emit = defineEmits();
  const userList = ref([]);
  const value1 = ref('');
  const isChart = ref(null);
  const boxChart = ref(null);
  const loading = ref(true);
  const showSearch = ref(true);
  const givActiveIndex = ref(0);
  const formattedDate = ref('');
  const formattedYesterday = ref('');
  const myGroupName = ref(null);
  const tabs = ref([]);
  const total = ref(0);
  const dateRange = ref([]);
  const alarmLevelList = ref([
    { label: '一般', value: 1 },
    { label: '严重', value: 2 },
    { label: '危急', value: 3 }
  ]);
  const today = ref(new Date());
  // 辅助函数，用于格式化日期
  function formatDate(date) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // getMonth() 返回的月份是从 0 开始的
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
  }
  function disabledDate(time) {
    // 当前时间
    const today = new Date();
    // 设置时间的小时，分钟，秒，毫秒为0，以避免时间的不精确比较
    today.setHours(0, 0, 0, 0);
    // 返回时间是否小于今天
    return time.getTime() > today.getTime();
  }
  function getDevicePointAttr() {
    getDevicePointAttrGroup({ deviceCode: authNav.deviceCode }).then((res) => {
      tabs.value = res.data;
      myGroupName.value = res.data[0].attrGroupName;
      if (isChart.value) {
        isChart.value.curveInfo(myGroupName.value, formattedYesterday.value);
      }
      if (boxChart.value) {
        boxChart.value.curveInfo(myGroupName.value, formattedDate.value);
      }
      console.log('res-----', res);
    });
  }
  // 辅助函数，用于获取昨天的日期并格式化
  function getYesterdayFormatted() {
    const yesterday = new Date(today.value);
    yesterday.setDate(yesterday.getDate() - 1); // 昨天的日期
    return formatDate(yesterday); // 使用 formatDate 函数格式化昨天的日期
  }
  // 使用 getYesterdayFormatted 函数获取昨天的日期
  formattedYesterday.value = getYesterdayFormatted();
  // 格式化当前日期
  formattedDate.value = formatDate(today.value);
  const alarmStatusList = ref([
    { label: '未处理', value: 0 },
    { label: '已处理', value: 1 }
  ]);
  const queryParams = ref({});
  const closeModal = () => {
    emit('closeCharts');
  };
  defineExpose({
    getList,
    getDevicePointAttr
  });

  onMounted(() => {});
  /** 导出按钮操作 */
  // const handleExport = () => {
  //   exportData(queryParams.value).then((res) => {
  //     // const headers = res.headers;
  //     const data = res;
  //     console.log('res', res.data);
  //     downloadFile(data);
  //   });
  // };
  /** 查询用户列表 */
  function getList() {
    loading.value = true;
    userList.value = [];
    if (!queryParams.value.deviceName) {
      queryParams.value.deviceName = authNav.deviceName;
    }
    busDeviceAlarmInfo(queryParams.value).then((res) => {
      loading.value = false;
      userList.value = res.data.data;
      total.value = res.data.total;
    });
  }
  function givSwitchTab(name, index) {
    givActiveIndex.value = index;
    console.log('isChart.value', isChart.value, name);
    myGroupName.value = name;
    if (isChart.value) {
      isChart.value.curveInfo(myGroupName.value, formattedYesterday.value);
    }
    if (boxChart.value) {
      boxChart.value.curveInfo(myGroupName.value, formattedDate.value);
    }
  }
  /** 搜索按钮操作 */
  const handleQuery = () => {
    if (boxChart.value) {
      boxChart.value.curveInfo(myGroupName.value, formattedDate.value);
    }
  };
  const handleQuery1 = () => {
    if (isChart.value) {
      isChart.value.curveInfo(myGroupName.value, formattedYesterday.value);
    }
  };
  handleQuery1;
  /** 重置按钮操作 */
  const resetQuery = () => {
    dateRange.value = [];
    queryParams.value = {
      alarmContent: undefined,
      alarmDesc: undefined,
      alarmDetails: undefined,
      alarmLevel: undefined,
      alarmStatus: undefined,
      alarmSystem: undefined,
      deviceCode: undefined,
      deviceName: undefined,
      endTime: undefined,
      orderByDesc: undefined,
      pageNum: 1,
      pageSize: 10,
      pointId: undefined,
      pointName: undefined,
      startTime: undefined
    };
    handleQuery();
  };
  function getTime(params) {
    const myDate = new Date();

    // 获取当前年、月、日
    const year = myDate.getFullYear();
    const month = myDate.getMonth() + 1; // getMonth() 返回的月份是从 0 开始的，所以需要 +1
    const date = MyDate.getDate();

    // 格式化输出，例如 "2024-08-06"
    myTime.value = `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
  }
  onMounted(() => {
    // getTime();
  });
</script>

<style lang="scss" scoped>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    width: 1300px;
    background: rgba(5, 30, 67, 0.95);

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(5, 30, 67, 0.8);
      width: 100%;
      height: 60px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);

      .modal-header-left {
        display: flex;
        align-items: center;
        margin-left: 8px;

        .m-h-l-day {
          display: flex;
          align-items: center;

          span {
            display: inline-block;
            width: 21px;
            height: 1px;
            border: 1px solid #c7feff;
            margin: 0 2px;
          }
        }
      }

      .close-button {
        cursor: pointer;
        font-size: 20px;
      }

      img {
        width: 16px;
        height: 16px;
        margin-right: 20px;

        &:hover {
          cursor: pointer;
          opacity: 0.85;
        }
      }
    }

    .m-c-box {
      width: 100%;
      height: 75vh;
      border-radius: 4px;

      .m-c-content {
        height: 100%;
        display: flex;

        .m-c-c-left {
          width: 82px;
          height: 100%;
          border-right: 1px solid rgba(250, 250, 250, 0.2);

          .m-c-c-l-content {
            width: 82px;
            height: 82px;
            background-image: url('../../../assets/images/home-page/jc-bg.png');
            background-size: 100% 100%;
            text-align: center;

            // line-height: 92px;
            img {
              padding-top: 15px;
              display: block;
              width: 29px;
              height: 44px;
              margin: 0 auto;
            }

            span {
              display: block;
              font-family: PingFang SC;
              font-size: 12px;
              color: #ffffff;
              margin-top: 8px;
            }
          }

          .tab-headers {
            width: 66px;
            margin: 0 auto;

            .button {
              cursor: pointer;
              width: 66px;
              // height: 25px;
              padding: 5px;
              font-family: PingFang SC;
              font-size: 12px;
              color: #ffffff;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 20px;
              background: #0a1c3c;
              border: 1px solid #95bdc4;
              border-radius: 2px;

              &.active {
                background: linear-gradient(0deg, #0b8ccf, #07268a);
                border-radius: 2px;
              }

              &:hover {
                opacity: 0.95;
              }
            }
          }
        }

        .m-c-c-right {
          width: 100%;

          .m-c-c-r-content {
            width: 100%;
          }
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    color: #ffffff;
  }

  :deep(.el-form-item) {
    margin: 0 !important;
  }

  :deep(.el-tooltip__trigger) {
    color: #ffffff !important;
  }

  :deep(.el-select__wrapper) {
    background-color: #0a1736 !important;
    outline: none !important;
    color: #fff !important;
  }

  :deep(.el-input__wrapper) {
    background-color: #0a1736 !important;
  }

  :deep(.el-table) {
    background-color: transparent !important;
    color: #fff !important;
    opacity: 0.9;
    outline: none !important;
  }

  :deep(.el-table) tr {
    outline: none !important;
    border: none !important;
    /* background-color: transparent !important; */
    /* height: 30px !important; */
    background-color: rgba(10, 138, 206, 0.6) !important;
    cursor: pointer;
  }

  :deep(.el-table th.is-leaf) {
    border: none !important;
    outline: none !important;
  }

  :deep(.el-table--medium td) {
    padding: 5px 0 !important;
    margin-top: 5px !important;
  }

  :deep(.el-table td) {
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    /* background-image: url(../../../assets/img/preview/c_check.png) ; */
    background-color: rgba(21, 60, 96, 0.6) !important;
    outline: none !important;
  }

  :deep(.el-table .cell) {
    line-height: normal !important;
  }

  :deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    /* background-image: url(../../../assets/img/preview/c_check.png) !important; */
    background-color: RGBA(18, 80, 123, 0.1) !important;
    border-bottom: 2px solid rgba(5, 30, 67, 0.7) !important;

    outline: none !important;
  }

  :deep(.el-table .el-table__header-wrapper th) {
    /* background-color: transparent !important; */
    width: 100%;
    background: url('../../../assets/images/home-page/tb-bg.png') !important;
    background-size: 100 100% !important;
    color: #fff !important;
    font-size: 12px !important;
  }

  :deep(.el-table .el-table__header-wrapper .el-checkbox__inner) {
    background-color: transparent !important;
  }

  :deep(.el-table .el-table__header-wrapper .el-checkbox__inner::after) {
    border-color: #fff !important;
  }

  :deep(.el-table .el-table__header-wrapper .el-checkbox__inner:hover) {
    border-color: #fff !important;

    height: 40px !important;
    color: #fff !important;
    font-size: 12px !important;
  }

  :deep(.el-table__body-wrapper) {
    height: 210px;
    overflow-y: scroll !important;
  }

  :deep(.el-table__body-wrapper::-webkit-scrollbar) {
    width: 0px !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  /* 滚动条轨道部分 */
  :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
    background-color: transparent !important;
    /* background-color: rgb(15, 43, 87) !important; */
  }

  /* 滚动条滑块部分 */
  :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
    border-radius: 0px !important;
    /* background-image: linear-gradient(135deg, #193b82, #193b82); */
    background-color: transparent !important;
  }

  :deep(.el-table::before) {
    background-color: transparent !important;
  }

  :deep(.el-table--fit .el-table__inner-wrapper:before) {
    background-color: transparent !important;
  }

  :deep(.el-pagination__goto) {
    color: #fff !important;
  }

  :deep(.el-pagination__total) {
    color: #fff !important;
  }

  :deep(.el-pagination__jump) {
    color: #fff !important;
  }

  :deep(.el-pagination__editor) {
    color: #fff !important;
  }

  :deep(.el-pagination__editor.el-input .el-input__inner) {
    color: #fff !important;
  }

  :deep(.el-pagination__sizes .el-input .el-input__inner) {
    color: #fff !important;
  }

  :deep(.el-pagination.is-background .btn-prev) {
    background-color: #11233d !important;
    border: 1px solid #4f687a !important;
    color: #fff !important;
  }

  :deep(.el-pagination.is-background .el-pager li) {
    background-color: #11233d !important;
    border: 1px solid #4f687a !important;
    color: #fff !important;
  }

  :deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #083b98 !important;
    border-color: #4f687a !important;
  }

  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background-color: #193b82 !important;
    border-color: #193b82 !important;
  }

  :deep(.el-pagination.is-background .btn-next) {
    background-color: #11233d !important;
    border: 1px solid #4f687a !important;
    color: #fff !important;
  }

  :deep(.el-input__inner) {
    color: #fff !important;
  }

  :deep(.el-select__selected-item) {
    color: #fff !important;
  }

  :deep(.el-date-editor .el-range-input) {
    color: #fff !important;
  }
</style>
